<template>
	<view class="p-10">
		<u-collapse :value="[1]">
			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">生产计划</text></view>
				</template>

				<view class="flex">
					<view class="fw" style="color: #555d6f; font-size: 28rpx">年度生产计划</view>
					<u-count-to bold fontSize="12" decimals="2" color="#0052D9" :endVal="obj['年度生产计划']" class="m-l-20" />
					<text class="unit">万吨</text>
				</view>
				<u-line-progress class="m-y-10" :percentage="((obj['实测采煤量'] / obj['年度生产计划']) * 100).toFixed(1)" height="15" activeColor="#4C82FF" />
				<view class="flex m-between">
					<view class="flex">
						<view class="unit">本年已完成</view>
						<u-count-to bold fontSize="12" decimals="2" color="#0052D9" :endVal="obj['实测采煤量']" class="m-l-5" />
						<text class="unit">万吨</text>
					</view>
					<view class="flex">
						<view class="unit">剩余</view>
						<u-count-to bold fontSize="12" decimals="2" color="#0052D9" :endVal="obj['剩余采煤量']" class="m-l-5" />
						<text class="unit">万吨</text>
					</view>
				</view>

				<view class="charts-box">
					<qiun-data-charts type="line" ontouch :opts="opts" :chartData="chartData" />
				</view>
			</u-collapse-item>

			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">二级矿量统计</text></view>
				</template>
				<my-grid :list="list" col="2" decimals="2" />
				<view class="charts-box">
					<qiun-data-charts type="line" ontouch :opts="opts2" :chartData="chartData2" />
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
import { getByApiCode } from '@/api/customApi';
/*********************************************生产计划**********************************/

const obj = ref({}),
	opts = {
		color: ['#1179E8', '#52D29D'],
		padding: [0, 10, 10, 0],
		enableScroll: true,
		legend: {
			position: 'top',
			margin: 10
		},
		xAxis: {
			disableGrid: true,
			calibration: true,
			// labelCount: 4,
			itemCount: 5
		},
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			data: [
				{
					min: 0,
					title: '万吨',
					titleOffsetY: -10
				}
			]
		},
		extra: {
			line: {
				type: 'straight',
				width: 2,
				activeType: 'hollow'
			}
		}
	},
	chartData = ref({});

function fn1() {
	getByApiCode({
		apiCode: 'CKSJ_SCJH_NDSCJH',
		propertyMapping: {
			name: 'name',
			val: 'val',
			unit: 'unit'
		}
	}).then((res) => {
		res.data.forEach((item) => {
			item.key = item.name;
			delete item.name;
		});
		obj.value = { ...obj.value, ...ArrayToObj(res.data) };
	});
	getByApiCode({
		apiCode: 'CKSJ_SCJH_BNYWC',
		propertyMapping: {
			name: 'name',
			val: 'val',
			unit: 'unit'
		}
	}).then((res) => {
		res.data.forEach((item) => {
			item.key = item.name;
			delete item.name;
		});
		obj.value = { ...obj.value, ...ArrayToObj(res.data) };
	});
	getByApiCode({
		apiCode: 'CKSJ_SCJH_SY',
		propertyMapping: {
			name: 'name',
			val: 'val',
			unit: 'unit'
		}
	}).then((res) => {
		res.data.forEach((item) => {
			item.key = item.name;
			delete item.name;
		});
		obj.value = { ...obj.value, ...ArrayToObj(res.data) };
	});

	getByApiCode({
		apiCode: 'SCJH',
		propertyMapping: {
			x: 'month',
			y: 'val',
			s: 'name'
		}
	}).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				if (!prev.series[cur.s]) prev.series[cur.s] = [];
				prev.series[cur.s].push(cur.y);
				return prev;
			},
			{
				categories: [],
				series: {}
			}
		);
		let series = [];
		for (let [name, data] of Object.entries(resData.series)) {
			series.push({
				name,
				data
			});
		}
		chartData.value = {
			categories: resData.categories,
			series
		};
	});
}
/*********************************************二级矿量统计**********************************/
const list = ref([
		{
			key: '开拓矿量',
			title: '开拓煤量',
			value: '0',
			unit: '万吨'
		},
		{
			key: '回采矿量',
			title: '回采煤量',
			value: '0',
			unit: '万吨'
		}
	]),
	opts2 = {
		color: ['#1179E8', '#52D29D'],
		padding: [0, 10, 10, 0],
		enableScroll: true,
		legend: {
			position: 'top',
			margin: 10
		},
		xAxis: {
			disableGrid: true,
			calibration: true,
			// labelCount: 4,
			itemCount: 4
		},
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			data: [
				{
					min: 0,
					title: '万吨',
					titleOffsetY: -10
				}
			]
		},
		extra: {
			line: {
				type: 'straight',
				width: 2,
				activeType: 'hollow'
			}
		}
	},
	chartData2 = ref({});

function fn2() {
	getByApiCode({
		apiCode: 'erjikuangliangtongji',
		propertyMapping: {
			key: 'name',
			val: 'val'
		}
	}).then((res) => {
		const data = ArrayToObj(res.data);
		list.value.forEach((item) => {
			item.value = data[item.key];
		});
	});

	getByApiCode({
		apiCode: 'erjikuangshengchantongji',
		propertyMapping: {
			x: 'month',
			y: 'val',
			s: 'name'
		}
	}).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				if (!prev.series[cur.s]) prev.series[cur.s] = [];
				prev.series[cur.s].push(cur.y);
				return prev;
			},
			{
				categories: [],
				series: {}
			}
		);
		let series = [];
		for (let [name, data] of Object.entries(resData.series)) {
			series.push({
				name,
				data
			});
		}
		chartData2.value = {
			categories: resData.categories,
			series
		};
	});
}

function getServerData(refresh) {
	Promise.all([fn1(), fn2()]).then(() => {
		if (refresh) {
			nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
	});
}

onShow(() => {
	getServerData();
});

onPullDownRefresh(() => {
	getServerData(true);
});
</script>

<style lang="scss" scoped>
.unit {
	color: #8993a8;
	font-size: 20rpx;
}
</style>
